import React, { useState, useEffect } from 'react'
import { Input, Button, DotLoading, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { useDispatch } from "react-redux";
import axios from 'axios'
import { postUser } from '../../api/index'
import { login } from '../../store/reducer/authSlice';
import './index.css'


export default function Login() {
	const [account, setAccount] = useState('')
	const [password, setPassword] = useState('')
  const [visible, setVisible] = useState(false)
	const [weatherData, setweatherData] = useState({})
	// const [weatherData] = useState({wea_img: "yun", tem: "25", wea: "阴天"})

	const navigate = useNavigate()
	const dispatch = useDispatch()
	useEffect(()=>{
		getWeather()
	},[])

	async function loginBtton(){
		if(account.trim() === "" || password.trim().length < 6) 
			return Toast.show({ icon: 'fail', content: "账号或密码输入错误", maskClickable:false })
		
		try {
			const {message, token} = await postUser({
				account,
				password
			})
			Toast.show({
				icon: 'success',
				content: message
			})

			dispatch(login({
				token
			}))

			navigate("/home",{
				replace: true
			})
			
		} catch (error) {
			Toast.show({
				icon: 'fail',
        content: error.message
			})
		}
	}

	const register = ()=>{
		navigate("/register")
	}

	function getWeather(){
		axios({
			method:'get',
			url:'https://v0.yiketianqi.com/api?unescape=1&version=v61&appid=61713796&appsecret=A1MbesNP'
		}).then((res)=>{
			//  xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
			const {wea_img, tem, wea, city} = res.data
			setweatherData({wea_img, tem, wea, city})
		})
	}

	function getWeatherImg(wea_img){
		let z = {
			"xue": "./weather/snow.png",
			"lei": "./weather/thunder.png",
			"shachen": "./weather/sand.png",
			"wu": "./weather/fog.png",
			"bingbao": "./weather/hail.png",
			"yun": "./weather/cloud.png",
			"yu": "./weather/rainstorm.png",
			"yin": "./weather/cloudy.png",
			"qing": "./weather/clear.png"
		}
		return z[wea_img]
	}

	const weatherHtml = ()=>{
		return (<>
							<img src={require(`${getWeatherImg(weatherData.wea_img)}`)} alt="weather" />
							<span>{weatherData.city}</span>&nbsp;&nbsp;<span>{weatherData.wea}</span>&nbsp;&nbsp;<span>{weatherData.tem}°C</span>
						</>)
	}

  return (
    <div id='login'>
			<div className='banner'>
				<div className='weather'>
					{weatherData.wea ? weatherHtml() : <DotLoading color='white' />}
				</div>
			</div>
			<div style={{width:'94%',margin:'0 auto',paddingTop: '10vh'}}>
				<div className='account'> 
					<Input
						placeholder='请输入账号'
						value={account}
						onChange={val => {
							setAccount(val)
						}}
					/>
				</div>
				
				<div className="password">
					<Input
						className="input"
						placeholder='请输入密码'
						value={password}
						onChange={val => {
							setPassword(val)
						}}
						type={visible ? 'text' : 'password'}
					/>
					<div className="eye">
						{!visible ? (
							<EyeInvisibleOutline onClick={() => setVisible(true)} />
						) : (
							<EyeOutline onClick={() => setVisible(false)} />
						)}
					</div>
				</div>
				<Button onClick={loginBtton} block shape='rounded' color='primary'>
					登录
				</Button>
				<div className='register'>
					<span onClick={register}>注册</span><span>找回密码</span> 
				</div>

			</div>
			
    </div>
  )
}
